<template>
  <div class="Biji">
    <div class="header">
      <van-search
        v-model="value"
        @search="search"
        placeholder="请输入搜索关键词"
      />
    </div>

    <div class="biji-box">
      <div class="listdata" >
       <div class="bijilist" v-for="(item , index) in bijilist" :key="index" @click='godatail(item.note.id)'>
        <div class="list-img">
            <img :src="item.note.image_u" alt="">
            <div class="list-title">
              {{item.note.title}}
              <!-- {{item.note.id}} -->
            </div>
        </div>
      </div>
         
    
      </div>
    
    </div>
  </div>
</template>

<script>
export default {
  name: "Biji",
  created() {
   
    this.getbijilist()
  },
  data() {
    return {
      value: "",
     
      bijilist:[]
    };
  },
  methods: {
    godatail(id) {
      this.$router.push({ name: "Bijidetail", params: { id } });
    },
    search() {
      this.$router.push({ name: "Search" });
    },
   
    getbijilist() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/notes/0/20",
      })
        .then((res) => {
          this.bijilist = res.data.result.list;
          console.log("res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.Biji{
  padding: 0 0 200px 0;
}
.header {
  display: flex;
  margin-top: 20px;
  width: 100%;
}
/deep/.van-icon-cart-o {
  position: absolute;
  right: 10px;
  top: 32px;
}
/deep/.van-search {
 width: 100%;
}
.listdata{
    width: 100%;

    column-count: 2;
  column-gap: 10px;
}
.bijilist{
 break-inside: avoid;
 position: relative;
}
.list-img{
  width: 100%;
  height: 100%;
}
.list-img img{
  width: 100%;
  border-radius: 5px;
}
.list-title{
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
color: rgb(255, 255, 255);
font-size: 15px;
}
</style>